<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="./css/reset.css">
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<!-- axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- qs -->
	<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
	<!-- 封装request -->
	<script src="./js/http.js"></script>

	<body>
		<div id="app" v-cloak>
			<div class="header flex-row j_b" v-cloak>
				<div class="flex-row" v-cloak>
					<div>
						<div class="flex-row">
							<div>月份</div>
							<div class="hd_sel  flex-row j_b" @click="show_month=!show_month" ref="s1">
								<div>{{current_month}}</div>
								<img src="./img/down_icon.png" />
							</div>
						</div>
						<div class="hd_e">
							<div v-show="show_month" class="drop_hd">
								<div class="drop_hd_item" v-for="(item,index) in month_list"
									:class="{'drop_hd_ative':current_month==item.name}" :key="index"
									@click="choseItem(item,index)">{{item.name}}
								</div>
							</div>
						</div>
					</div>
					<div style="margin-left: 91px;">
						<div class="flex-row">
							<div>选项0</div>
							<div class="hd_sel  flex-row j_b" @click="show_brand=!show_brand" ref="s2">
								<div>{{current_brand}}</div>
								<img src="./img/down_icon.png" />
							</div>
						</div>
						<div class="hd_e">
							<div v-show="show_brand" class="drop_hd">
								<div class="drop_hd_item" v-for="(item,index) in brand_list"
									:class="{'drop_hd_ative':current_brand==item}" :key="index"
									@click="choseBrand(item,index)">{{item}}
								</div>
							</div>
						</div>
					</div>
					<div style="margin-left: 91px;">
						<div class="flex-row">
							<div>选项一</div>
							<div class="hd_sel  flex-row j_b" @click="show_gsv=!show_gsv" ref="s3">
								<div>{{current_gsv}}</div>
								<img src="./img/down_icon.png" />
							</div>
						</div>
						<div class="hd_e">
							<div v-show="show_gsv" class="drop_hd">
								<div class="drop_hd_item" v-for="(item,index) in gsv_list"
									:class="{'drop_hd_ative':current_gsv==item}" :key="index"
									@click="choseGsv(item,index)">
									{{item}}
								</div>
						</div>
							</div>
					</div>
				</div>
				<div class="header_type">
					<div v-for="(item,index) in type_list" :key="index" class="flex-row" @click="current_type=index">
						<div class="type_circle" :class="{'type_circle_checked':index==current_type}"></div>
						<span>{{item.name}}</span>
					</div>
				</div>
			</div>
			<div>
				<div class="flex" v-cloak>
					<div class="nav_left">
						<div class="nav">
							<div class="nav_title">TimeGone</div>
							<div class="nav_percent">120.2%</div>
							<img src="img/nav_1.png" class="nav_1" />
						</div>

					</div>
					<div class="flex">
						<template v-for="(item,index) in list_header" :key="index">
							<div class="inf_box" :style="{background:item.back}" ref="inf_box">
								<!-- 弹框 -->
								<div class="pop_ques" v-show="curr_ques==index"
									:style="{right:curr_ques==4?'50px':'-135px'}">
									IMS_GSVIMS_GSVIMS_GSVIMS_GSVIMS_GSVIMS_GSVIMS_GSVIMS_GSV
								</div>
								<div class="inf_hd flex-row j_c" :style="{background:item.hd_back}">
									{{item.name}}
									<img class="inf_ques_icon" src="img/ques.png" @click="showQues(index)" />
								</div>
								<div class="inf">
									<div class="inf1">{{item.total}}</div>
									<div class="flex-row j_a" v-if="index==0 || index==4">
										<div class="flex-column">
											<div class="flex-row m_tb">
												<div class="i_title">vs Target</div>
												<div class="i_inf">{{item.target}}%</div>
											</div>
											<div class="i_much">{{item.total1}}</div>
										</div>
										<div class="flex-column">
											<div class="flex-row m_tb">
												<div class="i_title">vs LE</div>
												<div class="i_inf">{{item.le}}%</div>
											</div>
											<div class="i_much">{{item.total2}}</div>
										</div>
									</div>
									<div v-else class="flex-row j_c inf_other">
										<span>{{index==1?'vs IMS GSV':'vs POS GSV'}}</span>
										<span>{{item.per}}%</span>
									</div>
								</div>
							</div>
						</template>
					</div>
				</div>
				<div v-cloak v-for="(item,index) in test_data" :key="index" style="margin-bottom: 8px;">
					<div class="flex">
						<div class="nav_left">
							<div class="title flex-row j_c" @click="item.name=='Brand'?setDefault():''"
								:class="{'brand_no':curr_checked!=null&&item.name!='Brand'}">
								{{item.name}}
							</div>
						</div>
						<div class="flex">
							<div class="record record_title">
								<div class="re_hd flex-row j_b"
									:class="{'brand_no':curr_checked!=null&&item.name!='Brand'}">
									<div class="re_hd_first">MTD ACT</div>
									<div class="re_hd_last">LE</div>
									<div class="re_hd_last">ACT vs LE</div>
								</div>
								<div class="span"></div>
							</div>
							<div class="record record_title">
								<div class="re_hd flex-row j_b"
									:class="{'brand_no':curr_checked!=null&&item.name!='Brand'}">
									<div class="re_hd_first">MTD ACT</div>
									<div class="re_hd_last">LE</div>
									<div class="re_hd_last">vs IMS GSV</div>
								</div>
								<div class="span"></div>
							</div>
							<div class="record record_title">
								<div class="re_hd flex-row j_b"
									:class="{'brand_no':curr_checked!=null&&item.name!='Brand'}">
									<div class="re_hd_first">MTD ACT</div>
									<div class="re_hd_last">LE</div>
									<div class="re_hd_last">vs POS GSV</div>
								</div>
								<div class="span"></div>
							</div>
							<div class="record record_title">
								<div class="re_hd flex-row j_b"
									:class="{'brand_no':curr_checked!=null&&item.name!='Brand'}">
									<div class="re_hd_first">MTD ACT</div>
									<div class="re_hd_last">LE</div>
									<div class="re_hd_last">vs POS GSV</div>
								</div>
								<div class="span"></div>
							</div>
							<div class="record record_title">
								<div class="re_hd flex-row j_b"
									:class="{'brand_no':curr_checked!=null&&item.name!='Brand'}">
									<div class="re_hd_first">MTD ACT</div>
									<div class="re_hd_last">LE</div>
									<div class="re_hd_last">ACT vs LE</div>
								</div>
								<div class="span"></div>
							</div>
						</div>

					</div>
					<div v-for="(i0,ii) in item.list" :key="ii">
						<div class="flex">
							<div class="nav_left">
								<div class="brand flex-column"
									@click="item.name=='Brand'&&i0.name!='Total'?checkBrand(i0,ii):item.name=='Channel'&&i0.name!='Total'?toNextPage(i0,ii):''"
									:class="{'brand_ative':curr_checked==i0.name&&curr_checked!=null&&item.name=='Brand','brand_no':curr_checked!=i0.name&&curr_checked!=null}">
									<div :class="{'total':i0.name=='Total','next_ative':item.name=='Channel'}">
										{{i0.name}}
									</div>
								</div>
							</div>
							<div class="flex">
								<div class="record" :class="{'record_border':i0.name=='Total'}">
									<div class="re_box"
										:class="{'brand_ative':curr_checked==i0.name&&curr_checked!=null&&item.name=='Brand','brand_no':curr_checked!=i0.name&&curr_checked!=null}">
										<div class="flex-row re_box_item">
											<div style="width: 68px;">
												<div class="pillar" v-if="i0.name!='Total'">
													<div class="pillar_line" :style="{width:Number(i0.mtd_per)+'%'}">
													</div>
													<div class="p_p"
														:style="{width:Number(i0.le_per)+'%',background:i0.gsv_color}">
													</div>
												</div>
											</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.gsv_act}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.gsv_le}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.gsv_per}}%</div>
										</div>
									</div>
								</div>
								<div class="record" :class="{'record_border':i0.name=='Total'}">
									<div class="re_box"
										:class="{'brand_ative':curr_checked==i0.name&&curr_checked!=null&&item.name=='Brand','brand_no':curr_checked!=i0.name&&curr_checked!=null}">
										<div class="flex-row re_box_item">
											<div style="width: 68px;">
												<div class="pillar" v-if="i0.name!='Total'">
													<div class="pillar_line" :style="{width:Number(i0.cd_mtd_per)+'%'}">
													</div>
													<div class="p_p"
														:style="{width:Number(i0.cd_le_per)+'%',background:i0.cd_color}">
													</div>
												</div>
											</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.cd_act}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.cd_le}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.cd_per}}%</div>
										</div>
									</div>
								</div>
								<div class="record" :class="{'record_border':i0.name=='Total'}">
									<div class="re_box"
										:class="{'brand_ative':curr_checked==i0.name&&curr_checked!=null&&item.name=='Brand','brand_no':curr_checked!=i0.name&&curr_checked!=null}">
										<div class="flex-row re_box_item">
											<div style="width: 68px;">
												<div class="pillar" v-if="i0.name!='Total'">
													<div class="pillar_line" :style="{width:Number(i0.pd_mtd_per)+'%'}">
													</div>
													<div class="p_p"
														:style="{width:Number(i0.pd_le_per)+'%',background:i0.pd_color}">
													</div>
												</div>
											</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.pd_act}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.pd_le}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.pd_per}}%</div>
										</div>
									</div>
								</div>
								<div class="record" :class="{'record_border':i0.name=='Total'}">
									<div class="re_box"
										:class="{'brand_ative':curr_checked==i0.name&&curr_checked!=null&&item.name=='Brand','brand_no':curr_checked!=i0.name&&curr_checked!=null}">
										<div class="flex-row re_box_item">
											<div style="width: 68px;">
												<div class="pillar" v-if="i0.name!='Total'">
													<div class="pillar_line" :style="{width:Number(i0.ot_mtd_per)+'%'}">
													</div>
													<div class="p_p"
														:style="{width:Number(i0.ot_le_per)+'%',background:i0.ot_color}">
													</div>
												</div>
											</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.ot_act}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.ot_le}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.ot_per}}%</div>
										</div>
									</div>
								</div>
								<div class="record" :class="{'record_border':i0.name=='Total'}">
									<div class="re_box"
										:class="{'brand_ative':curr_checked==i0.name&&curr_checked!=null&&item.name=='Brand','brand_no':curr_checked!=i0.name&&curr_checked!=null}">
										<div class="flex-row re_box_item">
											<div style="width: 68px;">
												<div class="pillar" v-if="i0.name!='Total'">
													<div class="pillar_line"
														:style="{width:Number(i0.nsv_mtd_per)+'%'}">
													</div>
													<div class="p_p"
														:style="{width:Number(i0.nsv_le_per)+'%',background:i0.nsv_color}">
													</div>
												</div>
											</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.nsv_act}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.nsv_le}}</div>
											<div class="r_t" :class="{'fweight':i0.name=='Total'}">{{i0.nsv_per}}%</div>
										</div>
									</div>
								</div>
						</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var qs = Qs;
		var app = new Vue({
			el: '#app',
			data: {
				current_month: 'All',
				current_brand: 'all',
				current_gsv: "请选择",
				show_month: false,
				month_list: [{
						name: 'All'
					},
					{
						name: '2022-1'
					},
					{
						name: '2022-2'
					},
				],
				show_brand: false,
				brand_list: {},
				show_gsv: false,
				gsv_list: {},
				current_type: 0,
				type_list: [{
						name: "MTD",
					},
					{
						name: "QTD",
					},
					{
						name: "YTD",
					},
				],
				params: {}, //查询参数
				curr_ques: null,
				curr_checked: null,
				list_header: [],
				test_data: [{
						name: 'Brand',
						list: []
					},
					{
						name: 'Channel',
						list: []
					},
					{
						name: 'Zone',
						list: []
					},
				]
			},
			mounted() {
				document.addEventListener(
					"click",
					(e) => {
						let s1 = this.$refs.s1;
						let s2 = this.$refs.s2;
						let s3 = this.$refs.s3;
						let inf_box = this.$refs.inf_box;
						if (!s1.contains(e.target) || !s2.contains(e.target) || !s3.contains(e.target) || !inf_box
							.contains(e.target)) {
							this.show_month = false;
							this.show_brand = false;
							this.show_gsv = false;
							this.curr_ques = null;
						}
					},
					true
				);
			},
			created() {
				this.getData()
				console.log("用户代理: " + navigator.userAgent);
			},

			methods: {
				choseItem(e, index) {
					this.current_month = e.name;
					this.show_month = false;
					this.getData()
				},
				choseBrand(e, index) {
					this.current_brand = e;
					this.show_brand = false;
					this.getData();
				},
				choseGsv(e, index) {
					this.current_gsv = e;
					this.show_gsv = false;
					this.getData();
				},
				getData() {
					get('./data111.json').then((res) => {
						if (res.code == 200) {
							this.brand_list = res.data.brandList;
							this.gsv_list = res.data.gsvType;
							this.list_header = res.data.one_data;
							this.test_data[0].list = res.data.two_data;
							this.test_data[1].list = res.data.three_data;
							this.test_data[2].list = res.data.four_data;
							this.test_data.forEach(item => {
								item.list.forEach(i0 => {
									i0.gsv_color = "#8CD5B1";
									i0.cd_color = "#F0DE7D";
									i0.pd_color = "#FDAFD4";
									i0.ot_color = "#B6B8F8";
									i0.nsv_color = "#99D6F4";
								})
							});
						}
					})

				},

				showQues(index) {
					this.curr_ques = index;
				},
				checkBrand(e, i) {
					this.curr_checked = e.name;
				},
				setDefault() {
					this.curr_checked = null;
				},
				toNextPage(e, i) {
					window.location.href = "./nextIndex.html?name=" + e.name
				}
			}
		})
	</script>
	<style type="text/css">
		.brand_no {
			background: rgba(142, 142, 142, 0.39) !important;
		}

		.brand_ative {
			background: rgba(193, 255, 238, 0.39) !important;
		}

		.pillar_line {
			height: 9px;
			border-right: 1px solid rgba(92, 92, 92);
			position: absolute;
			left: 0px;
			top: 0;
			z-index: 99;
		}

		.pop_ques {
			width: 201px;
			background: rgba(255, 255, 255);
			word-wrap: break-word;
			word-break: break-all;
			box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
			border-radius: 6px;
			padding: 7px 10px;
			position: absolute;
			z-index: 9;
			top: 34px;
			right: -135px;
			font-size: 10px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 18px;
			color: #5C5C5C;
		}

		.next_ative {
			position: relative;
		}

		.next_ative::after {
			content: '';
			position: absolute;
			width: 95%;
			border: 1px solid #FF0000;
			left: 50%;
			bottom: 9px;
			transform: translate(-50%);
		}

		.inf_ques_icon {
			cursor: pointer;
			width: 16px;
			height: 16px;
			position: absolute;
			z-index: 1;
			right: 12px;
		}

		.inf_other {
			margin-top: 30px;
			color: #5C5C5C;
		}

		.inf_other span:first-child {
			font-size: 16px;
			margin-right: 12px;
		}

		.inf_other span:last-child {
			font-size: 20px;
			font-weight: bold;
			color: #FC2727;
		}

		.nav_title {
			padding-top: 30px;
			font-size: 14px;
			font-weight: 600;
			line-height: 22px;
		}

		.nav_percent {
			font-size: 16px;
			font-weight: bold;
			line-height: 38px;
		}

		.header_type {
			padding-right: 38px;
			cursor: pointer;
		}

		.header_type .type_circle_checked::after {
			content: '';
			position: absolute;
			width: 5px;
			height: 5px;
			background: rgba(67, 67, 67);
			border-radius: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.header_type .type_circle {
			position: relative;
			width: 11px;
			height: 11px;
			background: rgba(255, 255, 255, 0.39);
			border: 1px solid #C6C6C6;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 10px;
		}

		.header_type span {
			font-size: 14px;
			font-weight: 500;
			line-height: 22px;
			color: rgba(0, 0, 0, 0.65);
		}

		.drop_hd_ative {
			background-color: #6CD3A1;
			color: #fff !important;
		}

		.drop_hd_item {
			line-height: 30px;
			color: #333;
		}

		.drop_hd {
			position: absolute;
			width: 150px;
			min-height: 30px;
			box-sizing: border-box;
			padding: 10px;
			background: #fff;
			left: 65px;
			top: 3px;
			border-radius: 5px;
			z-index: 99;
			box-shadow: 5px 5px 5px #ccc;
			cursor: pointer;
		}

		.hd_e {
			position: relative;
		}

		.hd_sel img {
			width: 11px;
			height: 7px;
		}

		.hd_sel {
			margin-left: 12px;
			min-width: 148px;
			height: 32px;
			background: rgba(243, 243, 243);
			border-radius: 8px;
			box-sizing: border-box;
			padding: 0 16px;
			font-size: 14px;
			font-weight: 500;
			position: relative;
			cursor: pointer;
		}

		.fweight {
			font-weight: bold;
		}

		.re_box_item {
			height: 34px;
		}

		.p_p {
			height: 9px;
			background: #90DDB8;
			opacity: 1;
			border-radius: 0px 1px 1px 0px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.pillar {
			width: 55px;
			height: 9px;
			position: relative;
			margin-right: 13px;
			/* overflow: hidden; */
			flex-shrink: 0;
		}

		.span {
			width: 309px;
			height: 0px;
			border-bottom: 1px solid #707070;
			opacity: 0.2;
		}

		.r_t {
			text-align: center;
			font-size: 12px;
			line-height: 22px;
			color: #5C5C5C;
			width: 26%;
		}

		.re_hd_first {
			width: 50%;
			text-align: center;
			padding-left: 50px;
			box-sizing: border-box;
		}

		.re_hd_last {
			width: 25%;
			text-align: center;
		}

		.re_hd {
			height: 36px;
			font-size: 13px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.65);
			box-sizing: border-box;
		}

		.record {
			overflow: hidden;
			width: 309px;
			background: #FFFFFF;
			margin-right: 20px;
		}

		.record_border {
			border-radius: 0 0 8px 8px;
		}

		.record_title {
			border-radius: 8px 8px 0 0;
		}

		.record:last-child {
			margin-right: 0;
		}

		.statis {
			width: 309px;
			height: 165px;
			background: #FFFFFF;
			border-radius: 8px;
		}

		.i_much {
			font-size: 20px;
			font-family: DINOT;
			font-weight: bold;
			line-height: 38px;
			color: #5C5C5C;
		}

		.i_inf {
			font-size: 20px;
			font-family: DINOT;
			font-weight: bold;
			line-height: 38px;
			color: #FC2727;
		}

		.i_title {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 22px;
			color: #5C5C5C;
			margin-right: 8px;
		}

		.inf1 {
			font-size: 26px;
			font-family: DINOT;
			font-weight: bold;
			color: #000000;
			text-align: center;
		}

		.inf {
			padding: 18px 0 21px;
			box-sizing: border-box;
		}

		.inf_hd {
			width: 309px;
			height: 44px;
			background: #6CD3A1;
			border-radius: 8px 8px 0px 0px;
			font-size: 18px;
			color: #FFFFFF;
			position: relative;
		}

		.inf_box {
			width: 309px;
			height: 195px;
			background: linear-gradient(180deg, #E6FFF2 0%, #FFFFFF 100%);
			border-radius: 8px;
			margin-bottom: 8px;
			margin-right: 20px;
			position: relative;
		}

		.inf_box:last-child {
			margin-right: 0;
		}

		.total {
			font-size: 12px;
			font-weight: 600;
			color: #242625;
		}

		.total::after {
			display: none;
		}

		.brand {
			line-height: 34px;
			cursor: pointer;
		}

		.title {
			cursor: default;
			width: 104px;
			height: 36px;
			background: #F0F2F5;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.65);
		}

		.nav {
			width: 104px;
			height: 203px;
			background: #FFFFFF;
			position: relative;
			text-align: center;
		}

		.nav_1 {
			width: 85px;
			height: 96px;
			position: absolute;
			bottom: 20px;
			left: 0;
			z-index: 1;
		}

		.nav_left {
			width: 104px;
			background: #FFFFFF;
			/* border-radius: 0px 8px 8px 0px; */
			font-size: 12px;
			font-weight: 600;
			color: #5C5C5C;
			margin-right: 20px;
		}


		.header {
			width: 100%;
			height: 72px;
			background: #FFFFFF;
			margin-bottom: 20px;
			padding: 0 44px;
			box-sizing: border-box;
			font-size: 16px;
			font-weight: 600;
			color: #000000;
			min-width: 1440px;
		}

		body {
			background: #F0F2F5;
		}
	</style>

</html>
